<template>
	<div class="modal_box">
		<div class="modal_div" v-darg>
			<div class="modal_header">
				<slot name="header"></slot>
			</div>
			<div class="modal_banner">
				<slot name="banner"></slot>
			</div>
			<div class="modal_footer">
				<slot name="footer"></slot>
			</div>
			<div class="modal_close">X</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				x: "",
				y: ""
			}
		},
		methods: {

		},
		mounted() {
			let box = document.querySelector('.modal_div')
			let move = JSON.parse(window.localStorage.getItem("move"))
			box.style.left = move.x
			box.style.top = move.y
		},
		directives: {
			// 自定义PC拖拽指令 v-darg
			darg(el, vnode) {
				if ("ontouchstart" in window) {
					el.ontouchstart = function(e, vnode) {
						// 获取触摸的XY位置
						let startX = e.targetTouches[0].pageX - this.offsetLeft;
						let startY = e.targetTouches[0].pageY - this.offsetTop;
						// 触摸拖动位置
						this.ontouchmove = function(e) {
							// 获取所需数据
							var leftX = e.targetTouches[0].pageX - startX
							var topY = e.targetTouches[0].pageY - startY
							var thisW = e.targetTouches[0].target.clientWidth
							var parentW = e.targetTouches[0].target.offsetParent.clientWidth
							var thisH = e.targetTouches[0].target.clientHeight
							var parentH = e.targetTouches[0].target.offsetParent.clientHeight

							// 移动端打开时开启
							// if (leftX <= 0) {
							// 	leftX = 0;
							// }

							// if (leftX >= parentW - thisW) {
							// 	leftX = parentW - thisW;
							// }

							// if (topY <= 0) {
							// 	topY = 0;
							// }

							// if (topY >= parentH - thisH) {
							// 	topY = parentH - thisH;
							// }

							// 移动位置
							this.style.left = leftX + 'px';
							this.style.top = topY + 'px';

							// 使用本地存储位置
							window.localStorage.setItem("move", JSON.stringify({
								x: leftX + "px",
								y: topY + "px"
							}))

							this.ontouchend = function() {
								this.ontouchmove = null
							}
						}
					}
				} else {
					// 获取推拽元素
					let view = el
					// 鼠标按下事件
					view.onmousedown = e => {
						// 获取鼠标的相对位置XY
						let divX = e.clientX - view.offsetLeft
						let divY = e.clientY - view.offsetTop
						// 鼠标移动事件
						document.onmousemove = e => {
							// 获取拖拽元素位置XY
							let vleft = e.clientX - divX
							let vtop = e.clientY - divY
							// 移动元素
							view.style.left = vleft + "px"
							view.style.top = vtop + "px"
							// 使用本地存储位置
							window.localStorage.setItem("move", JSON.stringify({
								x: vleft + "px",
								y: vtop + "px"
							}))
						}
					}
					// 鼠标抬起事件
					document.onmouseup = e => {
						document.onmousemove = null
						document.onmousedown = null
					}
				}
			},
		}
	}
</script>

<style scoped lang='scss'>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.modal_box {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0%;
		left: 0%;
		background: rgba(0, 0, 0, .3);

		.modal_div {
			width: 600px;
			height: 400px;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: white;
			border-radius: 15px;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;

			.modal_header {
				height: 80px;
				line-height: 80px;
				font-size: 20px;
				font-weight: 600;
			}

			.modal_banner {
				height: 240px;
				border-top: 1px solid cadetblue;
				border-bottom: 1px solid cadetblue;
				overflow: auto;
			}

			.modal_footer {
				height: 80px;
				line-height: 80px;
			}

			.modal_close {
				width: 40px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				border: 1px solid black;
				border-radius: 25px;
				position: absolute;
				top: 5%;
				right: 3%;
				cursor: pointer;
			}
		}

	}
</style>
